<template>
    <div>
        <Row>
            <Col v-if="username">
                <Row class="title">
                    <Col>
                        {{username}}
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <chat-message-list :msgList="currentMsgList"></chat-message-list>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Row style="padding: 5px 16px;">
                            <Col>
                                <Poptip @on-ok="selectEmoji">
                                    <div slot="content">
                                        <div class="emoji-panel">
                                            <div v-for="(item, index) in emojiList"
                                                 class="emoji"
                                                 :key="index"
                                                 :title="item.desc"
                                                 @click="selectEmoji(item.value)">{{item.value}}</div>
                                        </div>
                                    </div>
                                    <Icon type="md-happy" title="表情" size="28" class="tool" />
                                </Poptip>
                                <label for="uploadFile">
                                    <Icon type="md-folder" title="文件" size="28" class="tool" />
                                    <input id="uploadFile" type="file" @change="sendFile" style="display: none;"/>
                                </label>
                            </Col>
                        </Row>
                        <Row>
                            <Col>
                                <Input ref="sendBox"
                                       style="padding: 0 16px"
                                       type="textarea"
                                       v-model="currentMsg"
                                       :autosize="{ minRows: 3, maxRows: 3}"
                                       @keyup.ctrl.enter.exact.native="sendText"/>
                            </Col>
                        </Row>
                        <Row type="flex" justify="end">
                            <Col>
                                <span>快捷键Ctrl+Enter</span>
                                <Button style="margin: 8px 16px 8px 8px;" @click="sendText">发送</Button>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Col>
            <Col v-else>
                <Row class="title" style="height: 46px;">
                    <Col>
                    </Col>
                </Row>
            </Col>
        </Row>

    </div>
</template>

<script>
    import ChatMessageList from './chat-message-list';
    import emoji from '@/libs/emoji';
    export default {
        name: 'ChatWindow',
        components: {ChatMessageList},
        props: {
            username: '',
            msgList: ''
        },
        data () {
            return {
                currentMsgList: [],
                currentMsg: '',
                emojiList: emoji
            };
        },
        methods: {
            sendFile (event) {
                if (event && event.target && event.target.value) {
                    try {
                        let fileType = this.getFileType(event.target.files[0].name);
                        let type = this.$im.msgType.file.value;
                        if (this.$im.msgType.img.fileTypes.indexOf(fileType) >= 0) {
                            type = this.$im.msgType.img.value;
                        } else if (this.$im.msgType.audio.fileTypes.indexOf(fileType) >= 0) {
                            type = this.$im.msgType.audio.value;
                        } else if (this.$im.msgType.video.fileTypes.indexOf(fileType) >= 0) {
                            type = this.$im.msgType.video.value;
                        }
                        this.$emit('on-send', { type, to: this.username, fileInput: event.target });
                    } catch (e) {

                    }
                    event.target.value = '';
                }
            },
            sendText () {
                if (this.currentMsg) {
                    let msg = this.currentMsg
                    this.$emit('on-send', { type: this.$im.msgType.txt.value, to: this.username, content: msg });
                    this.currentMsg = '';
                }
            },
            convertText (msg) {
                // 去除最后一个换行
                msg = msg.endsWith('\n') ? msg.substr(0, msg.length - 2) : msg;
                // 替换换行为html标签
                return msg.replace(/\n/g, '<br/>');
            },
            selectEmoji (emoji) {
                this.currentMsg += emoji;
                this.$refs.sendBox.focus();
            },
            getFileType (name) {
                if (name) {
                    let index = name.lastIndexOf('.');
                    if (index > 0) {
                        return name.substr(index);
                    }
                }
                return '';
            }
        },
        watch: {
            msgList (val) {
                this.currentMsgList = val;
            }
        }
    };
</script>

<style scoped lang="less">
    @emojiWidth: 40px;
    @emojiPanelWidth: @emojiWidth*10;
    .title {
        padding: 8px 16px;
        border-bottom: 1px solid #d6d6d6;
        line-height: 30px;
        text-align: center;
        color: #000;
        font-size: 14px;
    }
    .tool {
        cursor: pointer;
    }
    .emoji-panel {
        width: @emojiPanelWidth;
    }
    .emoji {
        font-size: 20px;
        float: left;
        width: @emojiWidth;
        height: @emojiWidth;
        line-height: @emojiWidth;
        text-align: center;
        border: 1px solid #f0f0f0;
        cursor: pointer;
    }
</style>
